<template>
    <div :class="classes" @click="switchClick">
        <div :class="this.disabled === true ? 'switchDis' : ''">
        <input type='checkbox' v-model="value1" disabled='switchDisabled'>
        <span class="switch-button"></span>
        </div>
    </div>
</template>

<script>
import size from '../../../mixins/size'
export default {
  name: 'sh-switch',
  mixins: [size],
  props: {
    value: {
      type: [Boolean, String, Number],
      default: ''
    },
    disabled: {
      type: [Boolean],
      default: false
    }
  },
  data () {
    return {
      value1: this.value,
      switchDisabled: this.disabled
    }
  },
  computed: {
    classes () {
      return [
        'sh-switch',
        {
          [`sh-switch-${this.sizes}`]: !!this.sizes
        }
      ]
    }
  },
  watch: {
    value (val) {
      this.value1 = val
    }
  },
  methods: {
    switchClick () {
      if (!this.disabled) {
        this.value1 = !this.value1
        this.$emit('input', this.value1)
        this.$emit('change', this.value1)
      }
    }
  }
}
</script>
